

.aiMessage.h5Ai{
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    background: #0E1222;
    .hoverScroll::-webkit-scrollbar{
        display: block;
    }
    .hoverScrollContent{
        width: 100% !important;
    }
    .pageTop{
        // height: 8rem;
        height:40px;
        // padding: 0 3rem;
        padding: 0 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #181F3B;
        .leftText{
            display: flex;
            align-items: center;
            i{
                margin-right: 12px;
                color: #fff;
                font-size: 16px;

            }
            img{
                // height: 4rem;
                // width: 4rem;
                // margin-right: 1rem;
                // margin-left: 2.5rem;
                height: 20px;
                width: 20px;
                margin-right: 10px;
                // margin-left: 25px;
                border-radius: 50%;
            }
            span{
                // font-size: 3.2rem;
                font-size:16px;
                font-weight: bold;
                color: #fff;
                background: linear-gradient(53deg, #0085FF 0%, #03F0FF 68.75%, #03FFC3 100%);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }
        .rightPoint{
            // height: 4rem;
            height: 20px;
            // padding: 0 2rem;
            padding: 0 10px;
            display: flex;
            align-items: center;
            // border-radius: 2rem;
            border-radius: 10px;
            background: #090E21;
            i{
                // margin-right: 1rem;
                margin-right: 5px;
                // font-size: 2rem;
                font-size: 10px;
                color:#00D1FF ;
            }
            span{
                // font-size: 2.4rem;
                font-size: 12px;
                font-weight: bold;
                color: #fff;
            }
        }
    }
    .loginPop{
        position: relative;
        padding:25px 30px;
        border-radius: 10px 10px 0px 0px;
        background:#fff linear-gradient(180deg, #FDE6E6 0%, rgba(255, 255, 255, 0.00) 25%);
        h2{
            margin-bottom: 25px;
            font-size: 18px;
            color: #000000;
        }
        .icon-cuowu{
            position: absolute;
            right: 12px;
            top: 12px;
            font-size: 14px;
        }
        .item{
            display: flex;
            align-items: center;
            padding-bottom: 8px;
            border-bottom: 1px solid #D2D1D1;
            margin-bottom: 25px;
            span{
                display: flex;
                align-items: center;
                justify-content: center;
                width: 83px;
                height: 24px;
                color: #fff;
                background: #EF3964;
                border-radius: 3px;
                font-size: 12px;
                transform: scale(0.85);
                &.disabled{
                    background: #A5A3A4;
                }
            }
            input{
                flex: 1;
                height: 18px;
                font-size: 12px;
                &::placeholder{
                    color: #A5A3A4;
                    font-size: 12px;
                    font-weight: 400;
                }
            }
        }
        .loginBtn{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 40px;
            margin-bottom: 20px;
            border-radius: 3px;
            background: #EF3964;
            font-size: 12px;
            color: #fff;
            font-weight: bold;
        }
        .otherLoginMethod{
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            span{
                margin-right: 12px;
                font-size: 12px;
                color: #A5A3A4;
            }
            strong{
                display: flex;
                align-items: center;
                justify-content: center;
                width: 105px;
                height: 30px;
                margin-right: 15px;
                border-radius: 3px;
                background: #F7F7F7;
                font-size: 12px;
                font-weight: 400;
                &:nth-child(3){
                    margin: 0;
                }
                i{
                    margin-right: 10px;
                }
            }
        }
        .protocol{
            display: flex;
            align-items: center;
            .ckbox{
                position: relative;
                width: 13px;
                height: 13px;
                border-radius: 2px;
                border:1px solid #D2D1D1;
                &.active{
                    &:after{
                        display: block;
                    }
                }
                &:after{
                    content: '';
                    position: absolute;
                    width: 8px;
                    height: 3px;
                    border-left: 1px solid #000000;
                    border-bottom: 1px solid #000000;
                    top:18%;
                    left: 50%;
                    transform:rotate(-45deg) translate(-50%,-50%);
                    display: none;
                }
            }
            p{
                font-size: 12px;
                transform: scale(0.85);
                color: #A5A3A4;
                width: 100%;
                a{
                    color: #A5A3A4;
                }
            }
        }
    }
    .messageList{
        background:#0E1222;
        // padding:0 2rem;
        padding:0 10px;
        .messageItem {
            // padding: 3rem 1rem;
            padding: 15px 5px;
            .aiLogo{
                // width: 4rem;
                // height: 4rem;
                // margin-top: 0.5rem;
                width: 20px;
                height: 20px;
                margin-top: 5px;
            }
            .linkLine{
                width: 12px;
                height: 5px;
                top: 6px;
                left: 15px;
                border-width: 1px;
            }
            .aiMessageContent{
                // padding-left: 2rem;
                padding-left: 10px;
                .failContent{
                    // width: 46rem;
                    // height: 12rem;
                    // font-size: 2.4rem;
                    width: 230px;
                    height: 60px;
                    font-size: 12px;
                    p{
                        margin:0;
                    }
                }
                .waitingArea{
                    width: 100%;
                    .stateText{
                        // margin-top:1rem;
                        margin-top:5px;
                        .text{
                            // font-size: 2.4rem;
                            font-size: 12px;
                        }
                        .cancelBtn{
                            // width: 14rem;
                            // height: 5rem;
                            // font-size: 2.4rem;
                             width: 70px;
                            height: 25px;
                            font-size: 12px;
                        }
                    }
                }
                .presetsArea{
                    // margin-top: -1rem;
                    margin-top: -5px;
                    b,span{
                        // font-size: 2.4rem;
                        // line-height: 3.6rem;
                        font-size: 12px;
                        line-height: 18px;
                    }
                }
                .authorInfo{
                    width: 100%;
                    margin-top: -15px;
                    margin-bottom: 0;
                    .headPic{
                        width: 10px;
                        height: 10px;
                    }
                    .name,.authorText{
                        font-size: 12px;
                        transform: scale(0.8);
                    }
                    .authorText{
                        width: calc(var(--vw, 1vw) * 100 - 170px);
                        // width: calc(100vw - 70px);
                    }
                }
                h4 {
                    margin-bottom: 5px;
                    strong{
                        // font-size: 2.8rem;
                        margin-right: 7px;
                        font-size: 14px;
                    }
                    .date{
                        // font-size:2.4rem;
                        font-size:12px;
                    }
                    .tag{
                        // font-size:2rem;
                        // width: 7.5rem;
                        // height: 3rem;
                        margin-right: 5px;
                        font-size:12px;
                        width: 45px;
                        height: 20px;
                        border-radius: 2px;
                        transform: scale(0.8);
                    }
                }
                .textNeed{
                    // margin-bottom: 2rem;
                    // font-size:2.4rem;
                    // line-height: 3.6rem;
                    margin-bottom: 10px;
                    font-size:12px;
                    line-height: 18px;
                }
                .picArea .picList{
                    width: 300px;
                    flex-wrap: wrap;
                    .picItem{
                        width: 100px;
                        margin-right: 10px;
                        margin-bottom: 10px;
                        .exitPreviewBtn{
                            position: fixed;
                            // top: 4rem;
                            // right: 4rem;
                            top: 20px;
                            right:20px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            // width: 15rem;
                            // height: 5rem;
                            width: 75px;
                            height: 25px;
                            background:rgba(0,0,0,0.8);
                            // border-radius: 0.5rem;
                            border-radius: 3px;
                            border:1px solid #4C4849;
                            // font-size: 2rem;
                            font-size: 12px;
                            color: #fff;
                            z-index: 10000;
                        }
                        .operatorBtns{
                            position: fixed;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 100%;
                            padding: 20px 0;
                            box-sizing: border-box;
                            span{
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                                border: 1px solid #444651;
                                background: #343E68;
                                width: 160px;
                                height: 50px;
                                margin:0 8px;
                                color: #00D1FF;
                                font-size: 14px;
                                font-weight: bold;
                                border-radius: 5px;
                                b{
                                    width: 115%;
                                    font-weight: normal;
                                    font-size: 12px;
                                    transform: scale(0.8);
                                    color: #fff;
                                    text-align: center;
                                }
                            }
                            bottom: 0;
                            left: 0;
                            
                            z-index: 10000;
                        }
                        .adm-image-viewer-content{
                            position: fixed;
                            width: calc((var(--vh, 1vh) * 100 - 150px)/2);
                            height: calc(var(--vh, 1vh) * 100 - 150px);
                            left: 50%;
                            top: 48%;
                            transform: translate(-50%,-50%);
                        }
                        .prohibit{
                            span{
                                font-size: 12px;
                            }
                        }
                    }
                }
            }
        }
    }
    .inputMessage{
        // min-height: 12rem;
        // padding: 2.5rem 3rem;
        min-height: 60px;
        padding: 12px 15px;
        background: #0E1222;
        box-sizing: border-box;
        border-top: 1px solid #455265;
        .label{
            // width: 14rem;
            // min-height: 7rem;
            // font-size: 2.4rem;
            width: 70px;
            min-height: 35px;
            font-size: 12px;
            .iconfont{
                margin-left: 3px;
                // font-size: 2rem;
                font-size: 12px;
            }
        }
        .inputArea {
            .inputBox{
                // padding:0.9rem 1rem;
                // min-height: 2.5rem;
                padding:5px;
                min-height: 13px;
                height: 100%;
                .adm-text-area-element{
                    // font-size: 2.4rem;
                    font-size: 12px;

                }
            }
            .btn{
                // width: 7rem;
                // height: 5rem; 
                width: 35px;
                height: 28px; 
                border-radius: 2px; 
                .iconfont{
                    margin: 0;
                    // font-size: 2.8rem;
                    font-size: 14px;
                } 
                
            }
        }
    }
    .leftMenu{
        position: relative;
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100 - 40px);       
        .title{
            display: flex;
            align-items: center;
            justify-content: space-between;
            // height: 8rem;
            // padding: 0 3rem;
            height: 40px;
            padding: 0 15px;
            border-bottom: 1px solid #263141;
            .text{
                display: flex;
                align-items: center;
                img{
                    // width: 4rem;
                    // height: 4rem;
                    // margin-right: 1rem;
                    width: 20px;
                    height: 20px;
                    margin-right: 5px;
                    border-radius: 50%;
                }
                span{
                    // font-size: 2.4rem;
                    font-size: 16px;

                    font-weight: bold;
                    color: #fff;
                    background: linear-gradient(53deg, #0085FF 0%, #03F0FF 68.75%, #03FFC3 100%);
                    background-clip: text;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }
            .iconfont{
                // width: 4rem;
                // height: 4rem;
                // font-size: 2.4rem;
                width: 20px;
                height: 20px;
                font-size: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #181F3B;
                color: #8F95AD;
                border-radius: 50%;
            }
        }
        .menuArea{
            // padding:3rem;
            // padding-bottom: 1rem;
            padding:15px 0;
            margin:0 15px;
            padding-bottom: 5px;
            border-bottom: 1px solid #263141;
            .menuItem{
                // height: 6rem;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                // margin-bottom: 2rem;
                // padding:0 1.5rem;
                margin-bottom: 10px;
                padding:0 7px;
                color: #fff;
                // font-size: 2.4rem;
                // border-radius: 0.5rem;
                font-size: 12px;
                border-radius: 3px;
                p{
                    display: flex;
                    align-items: center;
                }
                &.active{
                    background: #252E51;
                }
                i{
                    color: #9EB0D2;
                    // font-size: 2.8rem;
                    // margin-right: 1.5rem;
                    font-size: 14px;
                    margin-right: 7px;
                }
                b{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    // width: 8rem;
                    // height: 2.6rem;
                    // border-radius: 0.5rem;
                    width: 60px;
                    height: 22px;
                    border-radius: 3px;
                    background: #252E51;
                    color: #00D1FF;
                    // font-size: 1.6rem;
                    font-size:12px;
                    transform: scale(0.7);

                    
                }
                
            }
        }
        .botArea{
            position: absolute;
            bottom: 0;
            left: 0;
            // padding: 0 3rem;
            padding: 0 15px;
            width: 100%;
            box-sizing: border-box;
            .rightPoint{
                // height: 5rem;
                height: 25px;
                display: flex;
                align-items: center;
                // padding: 0 2rem;
                // border-radius: 3rem;
                // margin-bottom: 2.5rem;
                padding: 0 10px;
                border-radius: 15px;
                margin-bottom: 12px;
                background: #343E68;
                i{
                    // margin-right: 1rem;
                    // font-size: 2rem;
                    margin-right: 5px;
                    font-size: 12px;
                    color:#00D1FF ;
                }
                span{
                    // font-size: 2rem;
                    font-size: 12px;
                    font-weight: bold;
                    color: #fff;
                }
            }
            .userInfo{
                display: flex;
                align-items: center;
                justify-content: space-between;
                .userText{
                    display: flex;
                    align-items: center;
                    img{
                        // width: 4rem;
                        // height: 4rem;
                        // margin-right: 1rem;
                        width: 20px;
                        height: 20px;
                        margin-right: 5px;
                        border-radius: 50%;
                    }
                    span{
                        // font-size: 2rem;
                        font-size: 12px;
                        color: #D2DFEB;
                        font-weight: bold;
                    }
                }
                strong{
                    // font-size: 2rem;
                    font-size: 10px;
                    color: #D2DFEB;
                    font-weight: bold;
                    cursor: pointer;
                }
            }
        }
    }
    .ideaPopup{
        .ideaGroupCut .ideoItem.stylus ul li img{
            position: absolute;
            top: 0;
            left: 0;
        }
    }
}

